<template lang="html">
    <div class="cartbutton-wrapper">
        <transition name="scroll">
        <i @click="reduce()" class="icon iconfont icon-jianhao" v-show="food.count>0"></i>
        </transition>
        <transition name="fade">
        <div class="count" v-show="food.count>0">
            {{food.count}}
        </div>
        </transition>
        <i class="icon iconfont icon-iconfontxinzeng" @click="addCart($event)"></i>
    </div>
</template>

<script>
import Vue from 'vue';
export default {
	props: {
		food: {
			type: Object
		}
	},
	methods: {
		addCart(event) {
			if (!event._constructed) return;
			if (!this.food.count) {
				//新增的属性，vue没有办法检测新增属性的变化，所以不会触发dom的更新，所以需要set
				Vue.set(this.food, 'count', 0);
			}
			this.food.count++;
			this.$emit('dropBall', event.target);
		},
		reduce() {
			this.food.count--;
		}
	},
	created() {}
}
</script>

<style lang="less">
@import '../../../static/var.less';
.scroll-enter-active,
.scroll-leave-active {
    transition: 0.5s;
}
.scroll-enter {
    transform: translateX(@base*30rem) rotate(180deg);
    opacity: 0;
}
.scroll-leave-active {
    transform: translateX(@base*30rem) rotate(180deg);
    opacity: 0;
}
.cartbutton-wrapper {
    display: flex;
    i {
        color: @main-color;
        font-size: @base*40rem;
    }
    .count {
        width: @base*30rem;
        line-height: @base*50rem;
        text-align: center;
        color: @fc3;
    }

}
</style>
